<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>
  <div id="container">
    <ul id="tablist_1" role="tablist">
      <li id="tab_1" role="tab" tabindex="0" class="">Crust</li>
      <li id="tab_2" role="tab" tabindex="0" class="">Veges</li>
    </ul>

    <div id="panel_1" role="tabpanel" aria-labelledby="tab_1" >
    <h3>Select Crust</h3>
  </div>

<script>

test((t) => {
    var container = accessibilityController.accessibleElementById("container");

    var tabList = container.childAtIndex(0);
    var tab1 = tabList.childAtIndex(0);
    var tab2 = tabList.childAtIndex(1);
    var tabPanel = container.childAtIndex(1);

    assert_equals(tabList.role, "AXRole: AXTabList");
    assert_equals(tab1.role, "AXRole: AXTab");
    assert_equals(tab1.name, 'Crust');
    assert_equals(tab1.childrenCount, 2);
    assert_equals(tab2.role, "AXRole: AXTab");
    assert_equals(tab2.name, 'Veges');
    assert_equals(tabPanel.role, "AXRole: AXTabPanel");
    assert_equals(tabPanel.subrole, undefined);
}, "This tests that the aria roles for tab, tabpanel and tablist work as expected correctly.");


</script>

</body>
</html>
